import React, { useRef, useState } from 'react';

import { Tooltip } from 'antd';

import type { TooltipProps } from 'antd/lib/tooltip';

/**
 * BeyondHidingProps 类型定义
 * @typedef {Object} BeyondHidingProps
 * @property {string} [className] - 自定义样式类
 * @property {React.CSSProperties} [style] - 样式
 * @property {React.ReactNode} title - 提示内容
 */
type BeyondHidingProps = Omit<TooltipProps, 'open' | 'trigger'> & {
	className?: string;
	style?: React.CSSProperties;
	title: React.ReactNode;
};

/**
 * BeyondHiding 组件
 * 用于在内容溢出时显示提示
 * @param {BeyondHidingProps} props - 组件属性
 * @returns {JSX.Element} - 渲染的组件
 */
const BeyondHiding = ({
	className,
	style,
	title,
	...props
}: BeyondHidingProps): React.ReactElement => {
	const [isShow, setIsShow] = useState(false);

	// 引用 span 标签
	const contentRef = useRef<HTMLSpanElement>(null);

	/**
	 * 判断是否显示提示
	 * 计算 span 标签的 offsetWidth 与盒子元素的 offsetWidth，给 isShow 赋值
	 */
	const isShowTooltip = (): void => {
		if (contentRef?.current?.parentElement) {
			const spanWidth = contentRef.current.offsetWidth;
			const parentWidth = contentRef.current.parentElement.offsetWidth;

			if (spanWidth > parentWidth) {
				setIsShow(true);
			}
		}
	};

	return (
		<Tooltip open={isShow} title={title} {...props}>
			<span
				className={className}
				ref={contentRef}
				style={style}
				onMouseLeave={() => setIsShow(false)}
				onMouseOver={isShowTooltip}
			>
				{title}
			</span>
		</Tooltip>
	);
};

// 示例用法
// <BeyondHiding title="示例文本" />
export default BeyondHiding;
